<script setup lang="jsx">
import { ref, computed, watch, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { NInput, NButton, NScrollbar, NSpin, NCard, NIcon, NBadge, NPopover, NSpace } from 'naive-ui'
import { PaperPlane } from '@vicons/ionicons5'
import { Brain, BookOpen, Lightbulb, Database, History, PlusCircle } from '@vicons/fa'
import { FileText, MessageCircle, FileSearch } from '@vicons/tabler'

const router = useRouter()
const message = ref('')
const loading = ref(false)
const chatMessages = ref([
  {
    id: 1,
    type: 'ai',
    content: '欢迎使用智能问答系统！我是您的AI助手，可以帮助您解答关于平台文献、研究数据等方面的问题。请问有什么可以帮助您的？',
    timestamp: new Date().toLocaleTimeString(),
    avatar: '🤖'
  }
])
const scrollbarRef = ref(null)
const inputRef = ref(null)
const suggestionQuestions = ref([
  '请解释什么是深度学习？',
  '平台有哪些类型的文献数据？',
  '如何高效搜索相关研究文献？',
  '如何使用AI解读功能？'
])
// 新增：历史对话存储数组
const historyChats = ref([])
// 新增：当前对话的历史ID，用于跟踪是否是从历史记录加载的对话
const currentHistoryChatId = ref(null)

// 优化滚动到底部的函数
const scrollToBottom = () => {
  // 使用nextTick确保DOM更新
  nextTick(() => {
    // 使用requestAnimationFrame确保在渲染帧中执行
    requestAnimationFrame(() => {
      if (scrollbarRef.value) {
        // 尝试获取naive-ui滚动条的content元素
        const scrollbarEl = scrollbarRef.value
        
        // 方法1: 直接使用naive-ui的scrollTo方法（如果存在）
        if (scrollbarEl.scrollTo) {
          scrollbarEl.scrollTo({ 
            top: 99999, // 一个很大的值确保滚动到底部
            behavior: 'smooth' // 平滑滚动
          })
        }
        // 方法2: 获取内部滚动元素并设置scrollTop
        else {
          const contentEl = scrollbarEl.$el?.querySelector('.n-scrollbar-content')
          if (contentEl) {
            contentEl.scrollTop = contentEl.scrollHeight
          }
        }
      }
    })
  })
}

// 发送消息
const sendMessage = () => {
  if (!message.value.trim() || loading.value) return
  
  const userMessage = {
    id: Date.now(),
    type: 'user',
    content: message.value.trim(),
    timestamp: new Date().toLocaleTimeString(),
    avatar: '👤'
  }
  
  chatMessages.value.push(userMessage)
  message.value = ''
  scrollToBottom()
  
  // 模拟AI回复
  simulateAIResponse(userMessage.content)
}

// 模拟AI回复
const simulateAIResponse = (question) => {
  loading.value = true
  
  // 根据问题内容生成不同的回复
  let aiResponse = ''
  
  if (question.includes('深度学习')) {
    aiResponse = '深度学习是机器学习的一个分支，通过多层神经网络模拟人脑的学习过程。它能够自动从大量数据中学习特征和规律，广泛应用于图像识别、自然语言处理、推荐系统等领域。平台集成了多种深度学习模型用于文献分析和智能推荐。'
  } else if (question.includes('文献数据')) {
    aiResponse = '我们的平台收录了计算机科学、人工智能、数据科学等多个领域的文献数据，包括学术论文、会议论文、技术报告等。所有文献均经过标准化处理，支持关键词搜索、作者搜索、机构搜索等多种检索方式，并提供AI解读功能帮助您快速理解文献内容。'
  } else if (question.includes('搜索') || question.includes('查找')) {
    aiResponse = '您可以使用首页的搜索框进行关键词搜索，也可以进入检索页面使用高级搜索功能，支持按作者、发表时间、出版物、研究领域等多维度筛选。此外，您还可以利用平台的AI问答功能，直接用自然语言提问，我们的系统会为您找到相关文献并提供摘要。'
  } else if (question.includes('AI解读')) {
    aiResponse = 'AI解读功能位于文献详情页，当您查看某篇文献时，可以点击AI解读选项卡获取智能摘要、关键要点提取、术语解释等内容。该功能基于先进的自然语言处理技术，能够帮助您快速把握文献核心内容，节省阅读时间。'
  } else {
    aiResponse = `感谢您的提问。关于"${question}"，我可以为您提供相关的信息和建议。您可以尝试使用平台的搜索功能查找更多相关内容，或者访问文献详情页获取更深入的分析。如果您有更具体的问题，请随时告诉我。`
  }
  
  // 模拟网络延迟
  setTimeout(() => {
    const aiMessage = {
      id: Date.now() + 1,
      type: 'ai',
      content: aiResponse,
      timestamp: new Date().toLocaleTimeString(),
      avatar: '🤖'
    }
    
    chatMessages.value.push(aiMessage)
    loading.value = false
    scrollToBottom() // 确保AI回复后滚动到底部
  }, 1500)
}

// 新增：开始新对话
const startNewChat = () => {
  // 保存当前对话到历史记录（如果有对话内容）
  if (chatMessages.value.length > 1) {
    saveChatToHistory()
  }
  
  // 重置对话，保留欢迎消息
  chatMessages.value = [
    {
      id: 1,
      type: 'ai',
      content: '欢迎使用智能问答系统！我是您的AI助手，可以帮助您解答关于平台文献、研究数据等方面的问题。请问有什么可以帮助您的？',
      timestamp: new Date().toLocaleTimeString(),
      avatar: '🤖'
    }
  ]
  
  // 清空输入框
  message.value = ''
  
  // 清除当前历史ID标记
  currentHistoryChatId.value = null
  
  // 滚动到底部
  scrollToBottom()
}

// 新增：保存对话到历史记录 - 修复逻辑
const saveChatToHistory = () => {
  // 提取对话的第一个用户问题作为标题
  const firstUserMessage = chatMessages.value.find(msg => msg.type === 'user')
  const chatTitle = firstUserMessage ? firstUserMessage.content.substring(0, 30) + (firstUserMessage.content.length > 30 ? '...' : '') : '无标题对话'
  
  const updatedChat = {
    // 如果有currentHistoryChatId，表示是从历史记录加载的对话，应该更新而不是创建新的
    id: currentHistoryChatId.value || Date.now(),
    title: chatTitle,
    timestamp: new Date().toLocaleString(),
    messages: [...chatMessages.value]
  }
  
  if (currentHistoryChatId.value) {
    // 更新现有历史记录
    const index = historyChats.value.findIndex(chat => chat.id === currentHistoryChatId.value)
    if (index !== -1) {
      historyChats.value[index] = updatedChat
    } else {
      // 如果找不到对应的历史记录（可能被删除了），则添加为新记录
      historyChats.value.unshift(updatedChat)
    }
  } else {
    // 添加到历史记录数组开头
    historyChats.value.unshift(updatedChat)
  }
  
  // 限制历史记录数量，最多保留20条
  if (historyChats.value.length > 20) {
    historyChats.value.pop()
  }
}

// 新增：加载历史对话
const loadHistoryChat = (chat) => {
  startNewChat()
  chatMessages.value = [...chat.messages]
  // 设置当前历史ID标记
  currentHistoryChatId.value = chat.id
  scrollToBottom()
}

// 点击建议问题
const useSuggestion = (question) => {
  message.value = question
  inputRef.value?.focus()
}

// 处理键盘事件
const handleKeyPress = (e) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    sendMessage()
  }
}

// 组件挂载后滚动到底部
onMounted(() => {
  scrollToBottom()
})

// 监听消息变化，自动滚动
watch(chatMessages, () => {
  scrollToBottom()
}, { deep: true })
</script>

<template>
  <div class="qa-layout">
    <!-- 头部区域 -->
    <header class="qa-header">
      <div class="header-left">
        <NIcon class="header-icon"><Brain /></NIcon>
        <h1 class="header-title">智能问答</h1>
      </div>
      <div class="header-actions">
        <!-- 新增：新的对话按钮 -->
        <NButton type="text" class="header-action-btn" @click="startNewChat">
          <NIcon><PlusCircle /></NIcon>
          <span>新的对话</span>
        </NButton>
        
        <!-- 修改：历史记录弹出框 -->
        <NPopover>
          <template #trigger>
            <NButton type="text" class="header-action-btn">
              <NIcon><History /></NIcon>
              <span>历史记录</span>
            </NButton>
          </template>
          <div class="history-popover">
            <div v-if="historyChats.length === 0" class="no-history">
              <p class="history-title">暂无历史记录</p>
              <p class="history-desc">开始您的第一次对话吧！</p>
            </div>
            <div v-else class="history-list">
              <div v-for="chat in historyChats" :key="chat.id" class="history-item" @click="loadHistoryChat(chat)">
                <div class="history-item-title">{{ chat.title }}</div>
                <div class="history-item-time">{{ chat.timestamp }}</div>
              </div>
            </div>
          </div>
        </NPopover>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="qa-main">
      <!-- 左侧边栏：功能区 -->
      <aside class="qa-sidebar">
        <NCard class="sidebar-card">
          <template #header>
            <div class="sidebar-header">
              <NIcon><Lightbulb /></NIcon>
              <span>智能功能</span>
            </div>
          </template>
          <div class="sidebar-content">
            <NButton 
              block 
              class="sidebar-btn"
              @click="() => router.push('/lingTach/search')"
            >
              <NIcon><FileSearch /></NIcon>
              <span>文献搜索</span>
            </NButton>
            <NButton 
              block 
              class="sidebar-btn"
              @click="() => router.push('/lingTach/home')"
            >
              <NIcon><BookOpen /></NIcon>
              <span>浏览文献</span>
            </NButton>
            <NButton 
              block 
              class="sidebar-btn"
            >
              <NIcon><Database /></NIcon>
              <span>数据统计</span>
            </NButton>
          </div>
        </NCard>

        <NCard class="sidebar-card">
          <template #header>
            <div class="sidebar-header">
              <NIcon><MessageCircle /></NIcon>
              <span>热门问题</span>
            </div>
          </template>
          <div class="suggestions-list">
            <div 
              v-for="(suggestion, index) in suggestionQuestions" 
              :key="index"
              class="suggestion-item"
              @click="useSuggestion(suggestion)"
            >
              <NIcon class="suggestion-icon"><FileText /></NIcon>
              <span class="suggestion-text">{{ suggestion }}</span>
            </div>
          </div>
        </NCard>
      </aside>

      <!-- 中间区域：聊天记录 -->
      <section class="chat-section">
        <NScrollbar ref="scrollbarRef" class="chat-scrollbar">
          <div class="chat-messages m-15px">
            <div 
              v-for="msg in chatMessages" 
              :key="msg.id"
              :class="['chat-message', `message-${msg.type}`]"
            >
              <div class="message-avatar">{{ msg.avatar }}</div>
              <div class="message-content-wrapper">
                <div class="message-header">
                  <span class="message-sender">
                    {{ msg.type === 'ai' ? '智能助手' : '我' }}
                  </span>
                  <span class="message-time">{{ msg.timestamp }}</span>
                </div>
                <div class="message-content">{{ msg.content }}</div>
              </div>
            </div>
            <div v-if="loading" class="loading-indicator">
              <NSpin size="small" />
              <span class="loading-text">智能助手正在回复...</span>
            </div>
          </div>
        </NScrollbar>

        <!-- 输入区域 -->
        <div class="chat-input-area">
          <NInput
            ref="inputRef"
            v-model:value="message"
            placeholder="请输入您的问题，按Enter发送..."
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 4 }"
            @keyup="handleKeyPress"
            class="chat-input"
          />
          <NButton 
            type="primary" 
            class="send-btn"
            @click="sendMessage"
            :loading="loading"
          >
            <NIcon><PaperPlane /></NIcon>
            <span>发送</span>
          </NButton>
        </div>
      </section>
    </main>
  </div>
</template>

<style scoped lang="scss">
// 主布局
.qa-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

// 头部样式
.qa-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: linear-gradient(135deg, #00192b 0%, #0f4c81 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .header-icon {
    font-size: 24px;
    color: #4096ff;
  }

  .header-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
  }

  .header-actions {
    display: flex;
    gap: 16px;
  }

  .header-action-btn {
    color: white;
    font-size: 14px;

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}

// 历史记录弹出框
.history-popover {
  padding: 8px;
  min-width: 300px;
  max-height: 400px;
  overflow-y: auto;
}

.no-history {
  padding: 16px;
  text-align: center;
}
.history-list {
  max-height: 380px;
  overflow-y: auto;
}

.history-item {
  padding: 12px;
  margin-bottom: 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #ffffff;
  border: 1px solid #e8f3ff;

  &:hover {
    background-color: #e8f3ff;
  }

  .history-item-title {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .history-item-time {
    font-size: 12px;
    color: #999;
  }
}

// 主内容区域
.qa-main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

// 侧边栏样式
.qa-sidebar {
  width: 280px;
  background-color: white;
  border-right: 1px solid #e8f3ff;
  padding: 16px;
  overflow-y: auto;

  .sidebar-card {
    margin-bottom: 16px;
    background-color: #fafbfc;
    border: none;
    border-radius: 8px;
  }

  .sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #1d2129;
  }

  .sidebar-content {
    padding-top: 12px;
  }

  .sidebar-btn {
    margin-bottom: 8px;
    border-radius: 6px;
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    color: #666;

    &:hover {
      border-color: #4096ff;
      color: #4096ff;
    }
  }

  .suggestions-list {
    padding-top: 8px;
  }

  .suggestion-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    margin-bottom: 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    background-color: #ffffff;
    border: 1px solid #e8f3ff;

    &:hover {
      background-color: #e8f3ff;
      transform: translateX(4px);
    }

    .suggestion-icon {
      font-size: 16px;
      color: #4096ff;
      margin-top: 2px;
    }

    .suggestion-text {
      font-size: 13px;
      color: #333;
      line-height: 1.4;
      flex: 1;
    }
  }
}

// 聊天区域样式
.chat-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

// 聊天滚动条
.chat-scrollbar {
  flex: 1;
  padding: 24px;
}

// 聊天消息
.chat-messages {
  min-height: 100%;
}

.chat-message {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  animation: fadeIn 0.3s ease;
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.message-content-wrapper {
  flex: 1;
  max-width: 70%;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.message-sender {
  font-size: 14px;
  font-weight: 500;
  color: #1d2129;
}

.message-time {
  font-size: 12px;
  color: #999;
}

.message-content {
  padding: 12px 16px;
  border-radius: 8px;
  line-height: 1.6;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.message-user {
  justify-content: flex-end;

  .message-content-wrapper {
    max-width: 70%;
  }

  .message-content {
    background-color: #4096ff;
    color: white;
    border-bottom-right-radius: 4px;
  }
}

.message-ai {
  justify-content: flex-start;

  .message-content {
    background-color: white;
    color: #333;
    border: 1px solid #e8f3ff;
    border-bottom-left-radius: 4px;
  }
}

// 加载指示器
.loading-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 0 52px;
  color: #999;
  font-size: 14px;
}

// 输入区域
.chat-input-area {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  background-color: white;
  border-top: 1px solid #e8f3ff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

.chat-input {
  flex: 1;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  transition: border-color 0.3s;

  &:focus {
    border-color: #4096ff;
  }
}

.send-btn {
  align-self: flex-end;
  border-radius: 8px;
  padding: 0 20px;
  background-color: #4096ff;

  &:hover {
    background-color: #69b1ff;
  }
}

// 动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .qa-sidebar {
    width: 240px;
  }
}

@media (max-width: 768px) {
  .qa-sidebar {
    display: none;
  }
  
  .message-content-wrapper {
    max-width: 85%;
  }
}
</style>